<template>
  <div>
    <!--条件栏-->
    <el-form ref="form" :model="Form" label-width="80px">
      <el-form-item label="选择时间" prop="startTime">
        <el-date-picker
          v-model="Form.startTime"
          type="daterange"
          format="yyyy-MM-dd "
          value-format="yyyy-MM-dd"
          clearable
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <span>供应商:</span>
        <el-input v-model="Form.supplierName" style="width: 130px;" clearable placeholder="请输入内容" ></el-input>
        <el-button  style="margin-left: 7%" type="primary" @click="select">查询</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加供应商</el-button>
        <!--添加弹窗框-->
        <el-dialog style="margin-left: 20px" title="添加供应商" :visible.sync="dialogFormVisible"  width="34%"
                   center>
          <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
            <el-form-item label="供应商:" :label-width="formLabelWidth" prop="supplierName">
              <el-input v-model="subForm.supplierName"  clearable placeholder="请输入内容" >
              </el-input>
            </el-form-item>
            <br>
            <el-form-item label="手机号:" :label-width="formLabelWidth" prop="supplierName">
              <el-input v-model="subForm.SupplierPhone"  clearable placeholder="请输入内容" >
              </el-input>
            </el-form-item>
            <br>
            <el-form-item label="所在地区" :label-width="formLabelWidth"  prop="city">
              <div class="city" @click="toAddress">
                <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
              </div>
              <i class="arrow-r"> </i>
              <v-distpicker type="mobile" @selected='selected' v-show="addInp">
              </v-distpicker>
              <div class="mask" v-show="mask"></div>
            </el-form-item>
            <br>
            <el-form-item label="具体地址" :label-width="formLabelWidth" prop="details">
              <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="商品类型选取" :label-width="formLabelWidth" prop="type">
              <el-checkbox-group v-model="subForm.type">
                <el-checkbox label="饮料" name="type" ></el-checkbox>
                <el-checkbox label="零食" name="type" ></el-checkbox>
                <el-checkbox label="酒类" name="type" ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSupplier">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <div>
      <!--表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          width="50">
        </el-table-column>
        <el-table-column
          prop="supplierTime"
          label="申请时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商"
        >
        </el-table-column>
        <el-table-column
          prop="supplierType"
          label="商品分类"
        >
        </el-table-column>
        <el-table-column
          prop="supplierSite"
          label="地址"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          label="最后修改时间"
          width="160"
        >
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">移除</el-button>
            <el-button
              size="mini"
              type="info"
              @click="handleEdit(scope.$index, scope.row)">编辑 </el-button>
          <!--编辑弹窗-->
              <el-dialog style="margin-left: 20px" title="供应商修改" :visible.sync="dialogForm" width="34%"
            center>
            <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
              <el-form-item label="供应商:" :label-width="formLabelWidth" prop="supplierName">
                <el-input v-model="subForm.supplierName"  clearable placeholder="请输入内容" >
                </el-input>
              </el-form-item>
              <br>
              <el-form-item label="手机号:" :label-width="formLabelWidth" prop="supplierName">
                <el-input v-model="subForm.SupplierPhone"  clearable placeholder="请输入内容" >
                </el-input>
              </el-form-item>
              <br>
              <el-form-item label="所在地区" :label-width="formLabelWidth"  prop="city">
                <div class="city" @click="toAddress">
                  <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
                </div>
                <i class="arrow-r"> </i>
                <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                </v-distpicker>
                <div class="mask" v-show="mask"></div>
              </el-form-item>
              <br>
              <el-form-item label="具体地址" :label-width="formLabelWidth" prop="details">
                <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="商品类型选取" :label-width="formLabelWidth" prop="type">
                <el-checkbox-group v-model="subForm.type">
                  <el-checkbox label="饮料" name="type" ></el-checkbox>
                  <el-checkbox label="零食" name="type" ></el-checkbox>
                  <el-checkbox label="酒类" name="type" ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm = false">取 消</el-button>
              <el-button type="primary" @click="updateData(scope.$index, scope.row)">确 定</el-button>
            </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!--
      size-change：选择每页显示几行
      current-change：上一页 下一页
      current-page：当前页
      page-sizes：一页显示多少行的集合
      page-size：一页显示多少行
      total：总条数
           -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker' //引入安装好的包
  export default {
    name: 'SupplierManage',
    components: {VDistpicker},
    mounted() {//默认第一次加载
      initTable(this)
    },
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        tableData: [],
        total: 0,
        page: 1,
        size: 5,
        Form:{
          startTime:'',
          overTime:'',
          supplierName:''
        },
        dialogFormVisible: false,
        dialogForm:false,
        formLabelWidth: '120px',
        subForm: {
          supplierName:'',
          SupplierPhone:'',
          city:'',
          details:'',
          type: []
        },
        addInp: false,
        mask: false,
        rules: {
          supplierName: [
            {
              required: true,
              message: '供应商必须选',
              trigger: ['blur', 'change']
            }
          ],
          type: [
            {
              required: true,
              message: '商品的类型必须勾选',
              trigger: ['blur', 'change']
            }
          ],

          city: [
            {
              required: true,
              message: '城市必须选',
              trigger:  ['blur', 'change']
            }
          ],
          details: [
            {required: true,
              message: '具体地址必须填写',
              trigger: ['blur', 'change']}
          ]
        }
      }
    },
    methods: {
      select(){
        initTable(this)
      },
      verification () {
        if (this.Form.startTime.toString().split(",")[0]==this.Form.startTime.toString().split(",")[1]){
          this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
          return false
        }
        initTable(this)
      },
      // 点击弹出三级联动
      toAddress () {
        this.mask = true
        this.addInp = true
      },
      // 省市区三级联动
      selected (data) {
        this.mask = false
        this.addInp = false
        this.subForm.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
      },
      //以下是表格部分的方法
      indexMethod(index) {
        return index + 1
      },
      handleSizeChange(val) {
        this.size = val
        initTable(this)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page = val
        initTable(this)
        console.log(`当前页: ${val}`)
      },
      //数据表格移除的方法
      handleDelete(index, row){
        this.$confirm('是否确认移除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("delSupplier", {
            supplierId:row.supplierId,
            supplierStateID:2,
          }).then(resp =>{
            if (resp.data=="移除成功"){
              this.$message.success(resp.data)
              initTable(this)
              return false
            }
            this.$message.error(new Error(resp.data))
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //以下是数据添加的方法
      addSupplier () {
        alert(this.subForm.type)
        if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
          this.$message.error(new Error('供应商必须填写'))
          return false
        }else{
          let r =  /^[\u4E00-\u9FA5A-Za-z]+$/;
          if (!r.test(this.subForm.supplierName)){
            this.$message.error(new Error('请输入正确的供应商名称'))
            return false
          }
        }
        if (this.subForm.SupplierPhone == null || this.subForm.SupplierPhone === '') {
          this.$message.error(new Error('手机号码必填'))
          return false
        }else{
          let r = /^[1][358][0-9]{9}$/;
          if (!r.test(this.subForm.SupplierPhone)){
            this.$message.error(new Error('请输入正确的手机号'))
            return false
          }
        }
        if (this.subForm.city == null || this.subForm.city === '') {
          this.$message.error(new Error('所在区域必须选择'))
          return false
        }
        if (this.subForm.details == null || this.subForm.details === '') {
          this.$message.error(new Error('详细地址不能为空'))
          return false
        }


        if (this.subForm.type == null || this.subForm.type.length === 0) {
          this.$message.error(new Error('商品的类型必须勾选'))
          return false
        }

        //添加的数据发往后台
        this.$axios.post("addSupplier", {
          supplierName:this.subForm.supplierName,
          supplierPhone:this.subForm.SupplierPhone,
          supplierSite:this.subForm.city+" "+this.subForm.details,
          goodsType:this.subForm.type
        }).then(resp => {
          if (resp.data=='添加成功') {
            this.$message.success(resp.data)
            this.dialogFormVisible=false;
            initTable(this)
          }else{
            this.$message.error(new Error(resp.data))
          }
        })
      },
    //修改数据的方法
      handleEdit(index, row){
        // alert(row.supplierId)
        this.dialogForm=true
        this.supplierId=row.supplierId
        this.subForm.supplierName=row.supplierName
        this.subForm.SupplierPhone=row.supplierPhone
        this.subForm.city=row.supplierSite.substring(0,row.supplierSite.lastIndexOf("区")+1)
        this.subForm.details=row.supplierSite.substring(row.supplierSite.lastIndexOf("区")+2),((row.supplierSite.length)-1)

      },
      updateData(index, row){
        // alert(this.supplierId)
        if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
          this.$message.error(new Error('供应商必须填写'))
          return false
        }else{
          let r =  /^[\u4E00-\u9FA5A-Za-z]+$/;
          if (!r.test(this.subForm.supplierName)){
            this.$message.error(new Error('请输入正确的供应商名称'))
            return false
          }
        }
        if (this.subForm.SupplierPhone == null || this.subForm.SupplierPhone === '') {
          this.$message.error(new Error('手机号码必填'))
          return false
        }else{
          let r = /^[1][358][0-9]{9}$/;
          if (!r.test(this.subForm.SupplierPhone)){
            this.$message.error(new Error('请输入正确的手机号'))
            return false
          }
        }
        if (this.subForm.city == null || this.subForm.city === '') {
          this.$message.error(new Error('所在区域必须选择'))
          return false
        }
        if (this.subForm.details == null || this.subForm.details === '') {
          this.$message.error(new Error('详细地址不能为空'))
          return false
        }


        if (this.subForm.type == null || this.subForm.type.length === 0) {
          this.$message.error(new Error('商品的类型必须勾选'))
          return false
        }
        this.$axios.post("updateSupplierInfo", {
          supplierName:this.subForm.supplierName,
          supplierPhone:this.subForm.SupplierPhone,
          supplierSite:this.subForm.city+" "+this.subForm.details,
          goodsType:this.subForm.type,
          supplierId:this.supplierId
        }).then(resp => {
          if (resp.data=='修改成功') {
            this.$message.success(resp.data)
            this.dialogForm=false;
            initTable(this)
          }else{
            this.$message.error(new Error(resp.data))
          }
        })
      }
    }
  }
  function initTable($this) {
    $this.$axios.post("getSupplierList", {
      page: $this.page,
      size: $this.size,
      startTime:$this.Form.startTime.toString().split(",")[0],
      overTime:$this.Form.startTime.toString().split(",")[1],
      supplierName:$this.Form.supplierName
    }).then(resp => {
      if (resp) {
        $this.tableData = resp.data.supplierList
        $this.total = resp.data.count
      }
    })
  }

</script>

<style scoped>

</style>
